import React, { useEffect, useState } from "react";
import { getTypes } from "../../utils/api/billApi";
import { connect } from "react-redux";
import { message } from "antd";
import "assets/less/base/animation.less";

const BillType = ({ isLogin, onChange }) => {
  const [billTypes, setBillTypes] = useState([]);
  const [currentType, setCurrentType] = useState("其他");

  useEffect(() => {
    getTypes().then(res => {
      if (res.err === 0) {
        setBillTypes(res.data);
      } else {
        message.error(res.msg);
      }
    });
  }, [isLogin]);

  const handleTypeClick = ev => {
    const dom = ev.target;
    if (dom.tagName === "LI") {
      const type = dom.getAttribute("type");
      setCurrentType(type);
      onChange(type)
    }
  };

  return (
    <div className="bill-gap bill-types">
      <ul className="bill-types_wrap" onClick={handleTypeClick}>
        {billTypes.map(type => (
          <li
            key={type.id}
            type={type.name}
            className={currentType === type.name ? "active" : "rubberBand"}
          >
            {type.name}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default connect(store => ({
  isLogin: store.home.isLogin
}))(BillType);
